Object: props

Description: The props object is passed as a variable to all externally imported modules to share properties, methods, and data between chained dependancies.

Note: When a props object is declared using the $A.import() statement, the props object variable is automatically declared within every imported module referenced by that statement. As such, separate import statements can be declared one after the other and may include different props within each, even if they reference the same external module, the props that are received by the external module are sandboxed within the module instance for each individual import statement. As a result, it is impossible for any prop conflicts to occur when referencing the same modules from differing import statements using different variables.

Example

// Import statement #1
$A.import("ModuleName", {
  props: {
    poke: "Surprise!"
  }
});

// Import statement #2
$A.import("ModuleName", {
  props: {
    poke: "Wow!"
  }
});

// File content for "ModuleName.js" within the Modules folder
alert(props.poke);

Result:

Dialog from import statement #1: "Surprise!"
[Followed by] Dialog from import statement #2: "Wow!"

Passing Props

Props can also be passed both ways, into and out of externally referenced modules, allowing for custom configuration to occur before the props are used within the original import statement via the callback function.

Example

// File content for "ModuleName.js" within the Modules folder
props.number += 2;

// Import statement
$A.import("ModuleName", {
  props: {
    number: 1
  },
  call: function(props) {
    alert(props.number); // Shows in dialog: "3"
  }
});

Chaining Props

When passing props, it is also possible to pass the same props between multiple modules, even when these props are chained together to reference differing module dependancies.

Example

// File content for "ModuleName1.js" within the Modules folder
props.number += 2;
$A.import("ModuleName2", {
  props: props,
  call: function(props) {
    alert(props.number);
  }
});

// File content for "ModuleName2.js" within the Modules folder
props.number += 2;

// Import statement
$A.import("ModuleName1", {
  props: {
    number: 1
  }
});

Result:

Shows in dialog: "5"